<!DOCTYPE html>
<html lang="en">
<style>
    label {
        display: block;  /* 让 label 独占一行 */
        margin-bottom: 8px;  /* 增加间距 */
    }
    /* 文本框样式 */
    #user_input {
        width: 80%;
        max-width: 600px;
        height: 150px;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        resize: vertical; /* 允许垂直调整大小 */
    }

    /* 按钮样式 */
    button {
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover {
        background-color: #45a049;
    }
</style>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大健康咨询</title>
</head>
<body>
<h1>模拟健康咨询</h1>

<form action="/ask" method="post">
    <label for="user_input">输入你的健康问题：</label>
    <textarea id="user_input" name="user_input" required></textarea><br>
    <button type="submit">提交</button>
</form>

{% if user_input %}
<h2>用户输入问题：</h2>
<p>{{ user_input }}</p>

{% if answer %}
<h2>模型回答结果：</h2>
<p>{{ answer }}</p>
{% endif %}
{% endif %}
</body>
</html>
